<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件基本使用</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <!-- 
        Vue中使用组件的三大步骤：
        一、定义组件
        二、注册组件
        三、使用组件(写组件标签)



        一、如何定义一个组件
            使用Vue.extend({})创建，其中{}传入的是与new Vue({})的{}几乎相同，但是有点区别
            区别如下:  
                1.el不用写，为什么？   ----- 最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器
                2.data必须写成函数,为什么？   -----  避免组件被复用时，数据存在引用关系
            备注:使用template可以配置组件结构(一般在非单文件组件中使用)
        二、如何注册组件？
            1.局部注册：靠 new Vue的时候传入components选项
            2.全局注册: 靠 Vue.component('组件名',组件)
        三、编写组件标签
            <student></student>
    -->



    <!-- 准备一个容器 -->
    <div id="root">
        <company></company>
        <hr>
        <student></student>
        <hr>
        <student></student> 
    </div>

    <script>
        //组件的编写定义
        const company = Vue.extend({
            template:`
                <div>
                    <h2>公司名称: {{compName}}</h2> 
                    <h2>公司年龄: {{compAge}} </h2>
                    <button @click="showName">点我提示公司名称</button>
                </div>
            `,
            data() {
                return {
                    compName:'高新兴',
                    compAge:50
                }
            },
            methods: {
                showName(){
                    alert(this.compName)
                }
            }
        })

        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名:{{stuName}}</h2> 
                    <h2>学生年龄:{{age}}</h2>
                    <button @click="add">年龄+1</button>
                </div>
            `,
            data() {
                return {
                    stuName:'Jerry',
                    age:20
                }
            },
            methods:{
                add(){
                    this.age++
                }
            }
        })


        //将组件注册
        new Vue({
            el:"#root",
            components:{
                company:company,
                student:student
            }

        })

    </script>

</body>
</html>